<script setup lang="ts">
import { reactive, watch } from 'vue';
import { SessionAffinityCookieConfigType } from '../../types/SessionAffinity';
import { SessionAffinityCookieConfig } from '../../services/client';
import ClusterConfigConstants from '../../constants/ClusterConfigConstants';
import TimeSpanSelect from '../basic/TimeSpanSelect.vue';

const model = defineModel<SessionAffinityCookieConfigType>({ default: new SessionAffinityCookieConfig() });

let modelValue = reactive(model.value);
watch(modelValue, (value) => {
    console.log('session affinity cookie modelValue changed', value);
    model.value = value;
}, { deep: true })

</script>

<template>
    <ElDescriptions :column="2" border style="width: 100%;">
        <ElDescriptionsItem label="Domain">
            <ElInput v-model="modelValue.domain" clearable></ElInput>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="Path">
            <ElInput v-model="modelValue.path" clearable></ElInput>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="Http-Only">
            <ElSwitch v-model="modelValue.httpOnly"></ElSwitch>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="Secure Policy">
            <ElSelect v-model="modelValue.securePolicy" clearable>
                <ElOption v-for="(policy, index) in ClusterConfigConstants.SessionAffinity.CookieConfig.SecurePolicies"
                    :key="index" :label="policy.Label" :value="policy.Value">
                    {{ policy.Label }}
                </ElOption>
            </ElSelect>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="SameSite">
            <ElSelect v-model="modelValue.sameSite" clearable>
                <ElOption v-for="(mode, index) in ClusterConfigConstants.SessionAffinity.CookieConfig.SameSiteModes"
                    :key="index" :label="mode.Label" :value="mode.Value">
                    {{ mode.Label }}
                </ElOption>
            </ElSelect>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="Expiration">
            <TimeSpanSelect clearable v-model="modelValue.expiration"></TimeSpanSelect>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="Max Age">
            <TimeSpanSelect clearable v-model="modelValue.maxAge"></TimeSpanSelect>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="Is Essential">
            <ElSwitch v-model="modelValue.isEssential"></ElSwitch>
        </ElDescriptionsItem>
    </ElDescriptions>
</template>